<template>
  <el-upload
    class="upload-demo"
    :action="uploadApi"
    list-type="text"
    :multiple="true"
    :file-list="fileList"
    :show-file-list="true"
    :on-remove="handleRemove"
    :limit="limit"
    :on-change="handleChange"
    :on-success="handleSuccess"
    :on-exceed="handleExceed"
    :before-upload="beforeUpload"
  >
    <el-button icon='el-icon-upload' :style="{background:color,borderColor:color}" size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传mp4文件，且不超过10M</div>
  </el-upload>
</template>

<script>
  // import { getToken } from 'api/qiniu'
  import Cookies from 'js-cookie'

  export default {
    name: 'editor-video',
    props: {
      color: {
        type: String,
        default: '#1890ff'
      },
      limit: {
        type: Number,
        default: 5
      },
      video:{
        type: String,
        default: ''
      }
    },
    data() {
      return {
        uploadApi: api.UPLOAD_PIC+'?token='+Cookies.get(consts.CACHE_TOKEN) +'&uid='+Cookies.get(consts.CACHE_UID),
        dialogVisible: false,
        listObj: {},
        fileList: []
      }
    },
    watch:{
      video(val){
       // console.log('视频视频'+JSON.stringify(val))
        if(val != '' && val != undefined && val != null){
          this.fileList.push({name:"视频"+this.fileList.length+1,url:this.video})
        }else{
          //this.fileList=[];
          return;
        }
      }
    },
    methods: {   
      handleChange(file,fileList){
       if(file.name.split('.')[length-1]!='mp4'){
         return;
       }
       
      },
      handleSuccess(response, file) {
        if (response.code === 1) {
          response = response.data;
          this.$emit('successCBK',_.assign({responseUrl:response},file))
        } else {
          this.$notify.error(response.message);
        }
      },    
      handleRemove(file) {  
        this.fileList=[];
        this.$emit('successCBK', "")
      },
      beforeUpload(file) {
        const _self = this
        const isLt10M = file.size / 1024 / 1024 < 10;
        if(file.type != 'video/mp4'){
           this.$message.error('只能上传MP4文件！');
           return false;
           
        }
        if (!isLt10M) {
          this.$message.error('视频大小不能超过 10MB!');
          return
        }
      },
      handleExceed(files, fileList) {
        this.$notify.error(`文件数量超出限制，最多上传${this.limit}个`);
      }
    },
    mounted(){
      
    }
  }
</script>

<style lang="scss" scoped>
  .editor-slide-upload {
    margin-bottom: 20px;
  }
</style>
